<template>
  <div class="signalBox" @click="actionAuto">
    <div>
      <img src="../assets/icons/widget/signal.png" alt="">
      <p>{{title}}</p>
      <p class="toLoad">{{refresh}}</p>
    </div>
  </div>
</template>
<style lang="scss" rel="stylesheet/scss" scoped>
  .signalBox{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    background:$color-icbcf5;
    z-index:9999999;
    div{
      width:100%;
      height:4.5rem;
      position: absolute;
      top:0;bottom:0;left:0;right:0;
      margin:auto;
      img{
        width:2.19rem;
      }
      p{
        margin-top:1.5rem;
        margin-bottom:0.2rem;
        color:$color-3;
        font-size:0.26rem;
      }
      .toLoad{
        color:$color-icbcRed;
        font-size:0.26rem;
      }
    }
  }
</style>
<script>
  export default{
    name:'',
    data(){
        return {};
    },
    props:{
      title: {
        type:String,
        default:'网络君已失联，请稍后再试~'
      },
      refresh: {
        type:String,
        default:'点击屏幕重新加载'
      },
      okCallback: {
        type: Function,
        default: null
      }
    },
    methods:{
      actionAuto: function () {
        if (this.okCallback) {
          this.okCallback();
        } else {
          this.$store.commit('signalAlert', {show: false});
        }
        document.querySelector('html').style.overflow = 'auto';
      }
    },
    mounted:function(){
      document.querySelector('html').style.overflow = 'hidden';
    }
  }
</script>
